周精益分享 - 前端入门篇

Ruby on Rails 初体验 - 王胜

使用命令行快速创建应用的步骤

  • 创建应用程序

    1
    $rails new hello -d mysql

    备注 这里演示使用mysql作为数据持久层

  • 浏览hello world界面

    1
    $cd hello
$rake db:create RAILS_ENV='development' // 创建开发数据库
$bin/rails server

    备注 由于这里的rails版本是4.2.1，与msqyl2的最高版本有不兼容行，所以需要手动将Gemfile中mysql2降级。降级之后执行bundle install。

    1
    gem 'mysql2' -> gem 'mysql2', '~> 0.3.18'

  • 使用脚手架，创建模型、数据迁移脚本以及控制器和试图

    1
    $bin/rails generate scaffold Person name:string age:integer

  • 执行数据迁移

    1
    $bin/rake db:migrate RAILS_ENV=development

  • 启动应用

    1
    $bin/rails server

  • 浏览效果

    1
    http://localhost:3000/people

备注

此演示项目，ruby、gems和Rails的版本信息如下:

  • ruby: 2.0.0p481
  • rubygems: 2.4.5
  • rails: 4.2.1

参考：

Express for Node.js 上手演示 - 曾铭 （先占坑）

矢量图在Android 上应用 - 王进

VectorDrawable

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        <!--  intrinsic  size  of  the  drawable  -->
        android:height="300dp"
        android:width="300dp"
        <!-- size of the virtual canvas -->
        android:viewportHeight="40"
        android:viewportWidth="40"
        >
        <path android:fillColor="#ff00ff"
                android:pathData="M20.5,9.5
                        c-1.955,0,-3.83,1.268,-4.5,3
                        c-0.67,-1.732,-2.547,-3,-4.5,-3
                        C8.957,9.5,7,11.432,7,14
                        c0,3.53,3.793,6.257,9,11.5
                        c5.207,-5.242,9,-7.97,9,-11.5
                        C25,11.432,23.043,9.5,20.5,9.5z"
                />
</vector>

SVG→Vector

Android并不原生支持读取常见的向量文件格式，如ＳＶＧ
（主要是缺少ｃｓｓ支持），但是支持相同路径数据语法，
所以ＳＶＧ资源需要经过一定的转换；

使用SVG Path Data

  • M： move to 移动绘制点
  • L：line to 直线
  • Z：close 闭合
  • C：cubic bezier 三次贝塞尔曲线
  • Q：quatratic bezier 二次贝塞尔曲线
  • A：ellipse 圆弧

每个命令都有大小写形式，大写代表后面的参数是绝对坐标，小写表示相对坐标。参数之间用空格或逗号隔开

命令详解：

  • M (x y) 移动到x,y
  • L (x y) 直线连到x,y，还有简化命令H(x) 水平连接、V(y)垂直连接
  • Z，没有参数，连接起点和终点
  • C(x1 y1 x2 y2 x y)，控制点x1,y1 x2,y2，终点x,y
  • Q(x1 y1 x y)，控制点x1,y1，终点x,y
  • A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
    • rx ry 椭圆半径
    • x-axis-rotation x轴旋转角度
    • large-arc-flag 为0时表示取小弧度，1时取大弧度
    • sweep-flag 0取逆时针方向，1取顺时针方向

详细参考：http://www.w3.org/TR/SVG11/paths.html#PathData

Icon Font

解决矢量图低版本不兼容问题

详细参考：
1,http://blog.csdn.net/a345017062/article/details/46455745
2,http://blog.csdn.net/goodlixueyong/article/details/41448483

WordPress快速建站 —杨俊构

准备工具

操作步骤

  • 配置服务器和数据库

    1. 解压UPUPW_NP7.0-1511.7z 到本地目录
    2. 打开解压包后的upupw.exe配置平台。
    3. 输入“S1”开启全部服务
    4. 打开地址 http://127.0.0.1/ 会看到UPUPWPHP探针页面
    5. 打开地址 http://127.0.0.1/pmd/ 配置mysql数据库（默认用户名密码都是root）
    6. 新建数据库，用户名，密码
    7. 打开地址 http://127.0.0.1/ 使用数据库连接测试连接数据库是否正常

  • 安装配置wordpress

    1. 解压wordpress-4.3.1-zh_CN.zip压缩包
    2. 将wordpress文件夹拷贝到UPUPW发布根目录/htdocs文件夹下
    3. 打来地址http://127.0.0.1/wordpress，根据开始安装
    4. 输入刚才配置的数据库名，用户名，密码，点击提交进行
    5. 设置站点标题，后台登陆用户名，后台密码，邮件地址完成安装
    6. 再次打开地址http://127.0.0.1/wordpress测试安装完成

WordPress相关资源

spring aop 简单介绍

51offer Android重构之Architecture - xpleemoon

历史

  • 我们的app经历了一次重构，在重构过程中将IDE切换到Android Studio，并且编译脚本从Ant切换到了Gradle。
  • 不介绍IDE和Gradle的优势，主要介绍重构后app的Architecture相关部分。

从0到1是一个开始，再从1到N又是另一个开始。

Architecture

  • 当前我们的结构主要为4层：
    1. app
    2. core
    3. lib
    4. model

project结构

  • app依赖core，而core依赖lib和model。随着以后的业务发展、产品迭代或者有更好的结构划分，会再做调整。

module依赖

app——展现层（presention）

  • 用于页面展现，主要包含MVP模式中的VP。我们对V采用接口的方式去定义，然后让Activity或者Fragment去实现V接口，这样我们就达到接口编程的目的，P只需要关注V接口即可。以注册中的地区列表页面为例

VP

  • V
1
2
3
4
5
6
7
8
9
/**
 * 地区view，MVP－V
 */
public interface IRegionView {
    /**
     * 搜索更新
     */
    void search2Update();
}
  • P
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
 * 国家地区，MVP－P
 */
public class RegionPresenter {
    private List<Region> mRegions = OFRRegionHelper.getRegions();

    /**
     * 获取地区列表
     *
     * @return
     */
    public List<Region> getRegions() {
        return mRegions;
    }

    /**
     * 搜索
     *
     * @param regionView
     * @param searchRegion
     */
    public void search(@NonNull IRegionView regionView, String searchRegion) {
        mRegions.clear();
        if (TextUtils.isEmpty(searchRegion)) {
            mRegions.addAll(OFRRegionHelper.getRegions());
        } else {
            mRegions.addAll(OFRRegionHelper.searchRegions(searchRegion));
        }
        regionView.search2Update();
    }
}
  • 另外，我们的app有太多的业务逻辑，所以我们也使用了比较多的策略模式，方便以后的扩展和维护。比如不同的国家，它在意向单展现时就有不同的表现：
    • 可以同时选择的最多意向单数量
    • 每个学校可以同时选择的最多专业数量
    • 意向单名字
  • 于是，我们就对此采用了策略模式

国家意向单策略图

  • 国家意向单策略接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
 * 国家策略
 * <ul>
 * <li>不同国家可选的意向单数量不同，具体见{@link #maxCount2Select()}</li>
 * <li>不同国家的学校专业可选数量不同，具体见{@link #maxCountOfPerSchool2Select()}</li>
 * </ul>
 */
public interface ICountryPurpose {
    /**
     * 国家可以同时选择的最多意向单数量
     *
     * @return
     */
    int maxCount2Select();

    /**
     * 每个学校可以同时选择的最多专业数量
     *
     * @return
     */
    int maxCountOfPerSchool2Select();

    /**
     * 意向单名字，目前可用名字为：
     * <ol>
     * <li>专业</li>
     * <li>入学时间，当前只限日本</>
     * </ol>
     *
     * @param ctx
     * @return
     */
    String getName(@NonNull Context ctx);
}

core

  • 核心层，主要用于应用相关的URL拼接、图片加载、网络请求、json解析、第三方平台、配置和工具。

lib

  • 通用库层，不依赖于应用的任何业务，方便快速的移植到其它项目.

model

  • 数据层，作为MVP的M，用于应用的数据模型.

简单HTML5 吴明

  • 烟火效果
  • 404动画
  • 爱心树
  • 开发ide storm
  • 目录结构
    • dist:第三库存放地方，以下为存放指定文件类型目录
      • css
      • js
      • doc
      • img
    • src:项目指定文件类型目录
      • css
      • js
      • doc
      • img
  • 简单代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!--html5网页声明-->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>mobile</title>
    <meta charset="UTF-8">
    <!-- 此处还可以插入其他meta,样式单等信息-->
    <script type="text/javascript"></script>

</head>

<body>
<!--页面部分-->
<p>现实是残酷的,别做梦,从hello word开始吧!</p>
<canvas id="canvas">不支持html5</canvas>


<script type="text/javascript">
    <!-- 获取内容中id为canvas的元素-->
    var canvas = document.getElementById('canvas');
//    获取canvas的环境,
    var ctx = canvas.getContext('2d');
//      填充的样式为红色
    ctx.fillStyle = '#ff0000';
    ctx.st//    画一个矩形,位置x,y,w,h
    ctx.fillRect(0, 0, 600, 100);
</script>
</body>
</html>